<template>
  <div
    style="position:fixed;width: 300px;left: 10px;top:100px; border:0px solid #123123;z-index: 100;"
  >
    <el-menu
      ref="domMenu"
      class="el-menu-vertical-demo"
      default-active="1"
      v-bind="$attrs"
      :background-color="backgroundColor"
      @select="select"
      @open="open"
      @close="close"
    >
      <!--递归调用，支持n级菜单 myMenu-->
      <my-sub-menu-edit
        :current="current"
        :subMenu="menus"
        :dialogAddInfo="dialogAddInfo"
        :dialogModInfo="dialogModInfo"
      />
    </el-menu>
  </div>
  <!--添加的表单-->
  <my-form-add
    v-if="dialogAddInfo.isShow"
    :current="current"
    :dialogInfo="dialogAddInfo"
  />
  <!--修改的表单-->
  <my-form-edit
    v-if="dialogModInfo.isShow"
    :current="current"
    :dialogInfo="dialogModInfo"
  />
</template>

<script>
  // 模块菜单
  import { reactive, ref, watch, toRaw } from 'vue'
  import { ElMenu } from 'element-plus'
  // 状态
  import { store } from '@naturefw/nf-state'
  // 保存菜单的 controller
  import menuService from '../service/menu.js'

  // 编辑子菜单
  import mySubMenuEdit from './menu-edit-sub.vue'
  // 添加子菜单
  import myFormAdd from './form-add.vue'
  // 修改子菜单
  import myFormEdit from './form-edit.vue'

  import menuController from './_menu-controller'

</script>

<script setup>
  const props = defineProps({
    'background-color': {
      tyoe: String,
      default: '#ece5d9'
    }
  })

  // 当前菜单、文档内容，菜单列表
  const { current, menuList } = store
  
  // 自动展开菜单用
  const domMenu = ref(null)
  
  // 菜单集合
  const menus = reactive([])

  const {
    watchNaviId,
    select,
    open,
    close
  } = menuController(domMenu, menus)
  
  // 根据当前导航项ID，获取菜单列表
  watch(() => current.naviId, (id) => {
    if (!id) return
    let mm = menuList.find(item => item.naviId === id)
    if (!mm){
      // 添加
      const newMenu = {
        naviId: id,
        ver: current.ver,
        menus: [{
          menuId: '999_temp',
          ver: current.ver,
          text: '默认', // 激活的菜单名称
        }]
      }
      mm = newMenu
      menuList.push(newMenu)
    }
    // 可能会找不到对应的菜单
    menus.length = 0
    menus.push(...mm.menus)
    // 设置URL地址、菜单、加载文档等
    watchNaviId()
  }, {immediate: true})

  // 保存当前导航项对应的菜单组
  const savaMenuList = () => {
    const _menus = {
      naviId: current.naviId,
      ver: current.ver,
      menus: toRaw(menus)
    }
    // console.log('保存菜单的事件：', _menus)
    const { saveMenu } = menuService()
    saveMenu(_menus)

    // 修改状态
    const index = menuList.findIndex(item => item.naviId === current.naviId)
    menuList[index] = _menus
  }

  // 控制 字段 抽屉的展开收拢
  const dialogAddInfo = reactive({
    isShow: false,
    width: '50%',
    index: 1,
    parentMenu: menus,
    menu: {},
    savaMenuList: savaMenuList
  })

  const dialogModInfo = reactive({
    isShow: false,
    width: '50%',
    menu: {},
    savaMenuList: savaMenuList
  })

</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    max-width: 320px;
    min-height: 400px;
  }
</style>
